<template>
	<view class="content">
		<view class="head">
			<image class="bg-set" src="../../static/me/bg@2x.png"></image>
			<view class="left">
				<image class="logo" :src="head_url"></image>
			</view>
			<view class="text-area" @click="OnClick_login">
				{{title}}
			</view>
		</view>
		<view class="list">
			<uni-list v-for="(item,index) in avatarList" :border="false">
				<uni-list-item class="list-item" :title="item.text" :thumb="item.icon" link to="/pages/vue/index/index"
					:show-badge="true" :badge-text="item.num" badgeType="error" @click="click_goto_me(item,index)">
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		ACCESS_TOKEN,
		USER_ID,
		HEAD_URL,
		USER_NAME
	} from '@/store/mutation-types'
	import {
		checkLogin
	} from '@/core/app'
	export default {
		data() {
			return {
				title: '未登录',
				head_url:"/static/me/head.png",
				avatarList: [{
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						text: "我的配装",
						num: "12",
						url: '/pages/index/peizhuang/index',
					},
					{
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						text: "我的收藏",
						num: "",
						url: '/pages/index/peizhuang/index',
					},
					{
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						text: "消息",
						num: "",
						url: '/pages/index/peizhuang/index',
					},
					{
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						text: "设置",
						num: "",
						url: '/pages/index/peizhuang/index',
					},
					{
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						text: "我的配装",
						num: "",
						url: '/pages/me/feedback/index',
					},
					{
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
						text: "意见反馈",
						num: "",
						url: '/pages/me/feedback/index',
					},
				]
			}
		},
		onLoad() 
		{
			this.head_url =  storage.get(HEAD_URL)?storage.get(HEAD_URL):"/static/me/head.png"
			this.title =  storage.get(USER_NAME)?storage.get(USER_NAME):"未登录"
			// storage.set(USER_ID, userId, expiryTime)
			// storage.set(ACCESS_TOKEN, token, expiryTime)
			// storage.set(SET_USER_NICKNAME, headurl, expiryTime)
		},
		methods: {
			click_goto_me(item, index) {
				if (checkLogin()) {
					uni.navigateTo({
						url: this.avatarList[index].url
					})
				} else {
					uni.showModal({
						title: '友情提示',
						content: '尚未登录请登录。',
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/me/index"
								})
							}
						}
					})
				}
			},
			OnClick_login() {
				// 跳转到登录页
				!checkLogin() && this.$navTo('pages/me/loginWX/loginWX?type=1')
			}
		}
	}
</script>

<style scoped>
	.list {
		margin-top: 50rpx;
		width: 98%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 368rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		width: 100%;
		height: 368rpx;
	}

	.head .left {
		/* background-color: #008000; */
		width: 167rpx;
		height: 100%;
	}

	.head .left .logo {
		height: 114rpx;
		width: 114rpx;
		margin-top: 149rpx;
		margin-left: 30rpx;
		border-radius: 57rpx;
	}

	.text-area {
		text-align: center;
		height: 100%;
		/* background-color: #0000FF; */
		line-height: 410rpx;
		color: #FFFFFF;
	}
</style>
